import './Scss/QualityQualified.scss'
import { Pie } from '@ant-design/plots'
import { useState, useEffect } from 'react'
import { useRequest, useEventEmitter } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { TitleSmall001 } from '../Common/SmallTitle'
import { message } from 'antd'
import dayjs from 'dayjs'
import { FrontModalBox } from '../Modal'

export const QualityQualified001 = () => {
    const [OptionsCall, setOptionsCall] = useState()
    const [messageApi, contextHolder] = message.useMessage()
    const [OneData, setOneData] = useState([])
    const [TwoData, setTwoData] = useState()
    const [ThrData, setThrData] = useState([])
    const [ChartsState, setChartsState] = useState()
    const [LabList, setLabList] = useState()

    useEffect(() => {
        const cfg = {
            appendPadding: 10,
            autoFit: false,
            width: 150,
            height: 150,
            data: ThrData,
            angleField: 'value',
            colorField: 'type',
            radius: 1,
            legend: false,
            color: ['#C75212', '#12C79A'],
            pieStyle: { stroke: 'block' },
            label: null,
            interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
        }
        setChartsState(cfg)
    }, [ThrData, OneData])

    const { runAsync: getJSZXQualityStat } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { scores, labList, nonQualifiedPercent, qualifiedPercent, nonQualifiedCount, totalCount } = res
            setTwoData({ nonQualifiedCount, totalCount })
            const lab_self = scores.find(v => v.labCode === 'lab_self').score || 100
            const lab_sampling = scores.find(v => v.labCode === 'lab_sampling').score || 100
            const lab_dsf = scores.find(v => v.labCode === 'lab_dsf').score || 100
            setLabList(labList)
            setOneData([
                { type: '自检评分', value: lab_self, color: '#62D4E6' },
                { type: '抽检评分', value: lab_sampling, color: '#77C3FF' },
                { type: '第三方评分', value: lab_dsf, color: '#FEB891' },
            ])
            setThrData([
                { type: '不合格', value: nonQualifiedPercent, color: '#C75212' },
                { type: '合格', value: qualifiedPercent, color: '#12C79A' },
            ])
        },
    })

    useEffect(() => {
        getJSZXQualityStat({ url: 'getJSZXQualityStat' })
    }, [getJSZXQualityStat])
    return (
        <div className="QualityQualified001">
            {contextHolder}
            <TitleSmall001 title="数据合格率" />
            <div className="BoxList">
                <div>
                    {ChartsState && <Pie {...ChartsState} />}
                    <div>
                        {ThrData &&
                            ThrData.map(({ type, value, color }, index) => (
                                <div key={index}>
                                    <div style={{ color }}>{type}数据</div>
                                    <div>{value}%</div>
                                </div>
                            ))}
                    </div>
                </div>
                <div
                    onClick={() => {
                        if (TwoData?.totalCount === 0) {
                            messageApi.info('暂无数据')
                            return false
                        }
                        setOptionsCall({
                            type: 'TableTest',
                            data: { title: '试验数据列表', LabList, startDate: dayjs().format('YYYY-MM') + '-01' },
                        })
                    }}
                >
                    <div>试验数据总数</div>
                    <div>
                        <span>{TwoData?.totalCount}</span> 组
                    </div>
                </div>
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
